<template>
  <div>
    <div v-if="!noticeSuccuss" class="pa-4 gap-col-16">
      <div class="gap-col-8">
        <img class="img-width mb-4" src="/images/logo.png" alt="Fantasi-logo" />
        <div class="font-size-16 font-weight-500 line-height-140">{{ $t('mail.notice.leave') }}</div>
        <div class="gap-row-4 d-flex align-center font-size-12 font-weight-400 line-height-140 mb-4">
          <div>{{ $t('label.email') }}</div>
          <span class="text-primary">{{ obfuscateEmail(email) }}</span>
        </div>
        <div class="font-size-14 font-weight-400 line-height-140">{{ $t('mail.notice.cancealInfo') }}</div>
      </div>
      <div class="gap-col-16">
        <div class="d-flex justify-space-between font-size-14 mb-2">
          <div class="font-weight-500 line-height-140">{{ $t('info.emailCreatorNew') }}</div>
          <InputSwitch v-model="emailCreatorNewValue" @click="emailCreatorNewValue === !emailCreatorNewValue" />
        </div>
        <div class="text-subtitle font-size-10 font-weight-400 line-height-120">
          {{ $t('info.emailCreatorNewInfo') }}
        </div>
        <div class="d-flex justify-space-between font-size-14 mb-2">
          <div class="font-weight-500 line-height-140">{{ $t('info.emailUnread') }}</div>
          <InputSwitch v-model="emailUnreadValue" @click="emailUnreadValue === !emailUnreadValue" />
        </div>
        <div class="text-subtitle font-size-10 font-weight-400 line-height-120">{{ $t('info.emailUnreadInfo') }}</div>
      </div>
      <div class="gap-col-16 mt-10">
        <div>
          <p v-show="serverError" class="font-size-14 font-weight-500 line-height-140 text-primary-x text-end">
            {{ serverError }}
          </p>
          <BlockButton :label="$t('mail.notice.confirmDeliverySet')" :is-gradient="false" @click="confirm" />
        </div>
        <div
          @click="toSetMailLetter"
          class="font-size-14 font-weight-400 line-height-120 text-center pointer underline"
        >
          {{ $t('mail.notice.managePreferSet') }}
        </div>
      </div>
    </div>
    <NoticeConfirm v-else />
  </div>
</template>
<script setup>
import { onMounted, ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import NoticeConfirm from '@/pages/mail-notice/NoticeConfirm.vue'
import { useNavStore } from '@/store/nav'
import { usePopupMessageStore } from '@/store/popup-message'
import { $t } from '@/i18n'
import BlockButton from '@/components/button/BlockButton.vue'
import InputSwitch from '@/components/form/InputSwitch.vue'
import API from '@/http'

const { open } = usePopupMessageStore()
const navStore = useNavStore()
const { hide: hideNav, show: showNav, toHome } = navStore
hideNav()

const route = useRoute()
const router = useRouter()
const token = route.query.token

const email = ref('')
const emailCreatorNewValue = ref(null)
const emailUnreadValue = ref(null)
const noticeSuccuss = ref(false)
const serverError = ref('')

!token && toHome()

async function getDetail() {
  const data = { token }
  try {
    const res = await API.Member.list({ data })
    email.value = res.email
    emailCreatorNewValue.value = !!res.email_creator_new
    emailUnreadValue.value = !!res.email_unread
  } catch (e) {
    console.error(e)
  }
}

onMounted(() => {
  getDetail()
})

function obfuscateEmail(email) {
  const atIndex = email.indexOf('@')
  if (atIndex <= 2) {
    return email // 如果@前的字元數小於或等於2，直接傳回
  }
  return `${email[0]}${'*'.repeat(atIndex - 2)}${email[atIndex - 1]}${email.slice(atIndex)}`
}

const confirm = async () => {
  try {
    const data = {
      token,
      email_creator_new: Number(emailCreatorNewValue.value),
      email_unread: Number(emailUnreadValue.value),
    }
    console.log('data:', data)
    await API.Member.set({ data })
    noticeSuccuss.value = true
    open($t('common.setSuc'))
  } catch (e) {
    console.error(e)
    serverError.value = e.message
  }
}

const toSetMailLetter = () => {
  router.replace({ path: '/mine/settings/notify-letter' })
  showNav()
}
</script>
<style scoped lang="scss">
.underline {
  text-decoration: underline;
}
.img-width {
  width: 5.0625rem;
}
</style>
